<template>
	<a-trigger :position="position" :update-at-scroll="true" :popup-visible="visible" :animation-name="animationName" trigger="hover" v-bind="$attrs">
		<div @click="open">
			<slot></slot>
		</div>
		<template #content>
			<div ref="target">
				<slot name="content" :close="close" :visible="visible"></slot>
			</div>
		</template>
	</a-trigger>
</template>

<script setup lang="ts">
import { onClickOutside } from "@vueuse/core";
const { wsCache } = useCache();

const target = ref(null);

onClickOutside(target, (event) => {
	if(!wsCache.get('visible')){  //内容里面的弹框只要展开就不会触发关闭
		visible.value = false;
	}
});
const emit = defineEmits(['visible'])
const visible = ref(false);
defineProps({
	trigger: {
		type: String,
		default: "click"
	},
	isClose: {
		type: Boolean,
		default: false
	},
	position: {
		type: String,
		default: "right"
	},
	animationName: {
		type: String,
		default: "fade-in"
	}
});
const close = () => {
	visible.value = false;
};
const open = () => {
	visible.value = true;
};
watch(()=>visible.value,data=>{
	emit('visible',data)
},{immediate:true})
</script>

<style scoped lang="scss"></style>
